<script>
import {
  addMaterial_return,
  getProcedureCode,
  getSaCode,
  getSlCode,
  getWCode,
  listMaterial,
  listTaskManager,
  listUnit,
  listWorkGroup,
  listWorkOrder,
  listWorkTask
} from '@/api/yyj/wm/inbound/material_return'

export default {
  dicts: ['gbs_good_type'],
  data() {
    return {
      // 表单参数
      form: {},
      peoForm: {},
      currentRow: {},
      orderForm: {},
      workTaskForm: {},
      materialListForm: {},
      warehouseForm: {},
      // 非多个禁用
      multiple: true,
      // 生产工单查询参数
      workOrderQuery: {
        pageNum: 1,
        pageSize: 10,
        prOrderCode: null,
        prOrderName: null,
        prProductCode: null,
        prProductName: null,
        prProductSpecType: null,
        prGoodType: null,
        prProductUnitName: null,
        orderVo: null,
        productVo: null
      },
      // 工单任务查询参数
      workTaskQuery: {
        pageNum: 1,
        pageSize: 10,
        workOrderCode: null,
        workTaskVo: null,
        workTaskProcedureCode: null,
        workTaskManager: null
      },
      // 物料查询参数
      materialQuery: {
        pageNum: 1,
        pageSize: 10,
        materialVo: null,
        prouteCode: null,
        procedureCode: null,
        unitType: null,
        pdGoodType: null
      },
      // 表单校验
      rules: {
        pmrName: [
          { required: true, message: '退料单名称不能为空', trigger: 'blur' }
        ],
        pmrReturnDate: [
          { required: true, message: '退料日期不能为空', trigger: 'blur' }
        ],
        pmrReturnPeo: [
          { required: true, message: '退料人不能为空', trigger: 'blur' }
        ],
        pmrReturnPeoName: [
          { required: false, message: '退料人名不能为空', trigger: 'blur' }
        ],
        pmrWorkOrder: [
          { required: true, message: '工单编号不能为空', trigger: 'blur' }
        ],
        pmrWorkTask: [
          { required: false, message: '任务编号不能为空', trigger: 'blur' }
        ],
        pmrWorkProcedure: [
          { required: true, message: '工序编号不能为空', trigger: 'blur' }
        ],
        pmrDesc: [
          { required: false, message: '备注不能为空', trigger: 'blur' }
        ],
        pmrStatus: [
          { required: true, message: '状态不能为空', trigger: 'change' }
        ],
        createBy: [
          { required: true, message: '创建人不能为空', trigger: 'blur' }
        ],
        createTime: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ],
        pmrWorkOrderName: [
          { required: true, message: '工单名称不能为空', trigger: 'blur' }
        ]
      },
      // 是否显示弹出层
      peoSearchOpen: false,
      orderSearchOpen: false,
      taskSearchOpen: false,
      materialListSearchOpen: false,
      warehouseSearchOpen: false,
      // 物料清单列表
      returnMaterialList: [],
      // 加载覆盖层
      loading: false,
      orderLoading: false,
      workTaskLoading: false,
      // 物料列表
      materialList: [],
      // 物料总条数
      materialTotal: 0,
      // 物料表格遮罩层
      materialLoading: false,
      // 弹出层标题
      title: '',
      // 班组列表
      workGroupList: [],
      // 初始选中班组
      activeGroup: '',
      // 生产工单列表
      workOrderList: [],
      // 生产工单总数
      workOrderTotal: 0,
      // 工单表是否被选择
      isOrderSelected: false,
      // 工单任务列表
      workTaskList: [],
      // 工单任务总数
      workTaskTotal: 0,
      // 工单任务是否被选择
      isWorkTaskSelected: false,
      // 工序列表
      procedureList: [],
      // 任务负责人列表
      taskManagerList: [],
      // 显示工单编号
      workOrderCodeDisplay: null,
      // 显示工单名称
      workOrderNameDisplay: null,
      // 单位列表
      unitList: [],
      // 单位是否被选择
      isMaterialSelected: false,
      // 仓库集合
      warehouseList: [],
      // 库区集合
      areaList: [],
      // 库位集合
      locationList: [],
      // 仓库集合索引
      warehouseIndex: 0,
      // 仓库是否被选择
      isWarehouseSelected: false,
      // 选中的物料行
      selectedRows: []
    }
  },
  created() {
    this.reset()
    this.workOrderQueryReset()
    this.workTaskQueryReset()
  },
  computed: {
    selectedGroupMembers() {
      const group = this.workGroupList.find(g => g.wgCode === this.activeGroup)
      return (group && group.pbsWorkGroupPeoVo) ? group.pbsWorkGroupPeoVo : []
    },
    getGbsGoodType() {
      return this.dict.type.gbs_good_type
    }
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        pmrCode: null,
        pmrName: null,
        pmrReturnDate: null,
        pmrReturnPeo: null,
        pmrReturnPeoName: null,
        pmrWorkOrder: null,
        pmrWorkTask: null,
        pmrWorkProcedure: null,
        pmrDesc: '',
        pmrStatus: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        materialCount: null,
        requestNum: null,
        pmrWorkOrderName: null,
        pmrWorkTaskName: null,
        prouteCode: null,
        prouteName: null,
        procedureName: null,
        returnMaterialList: [],
        pmrProductCode: null,
        workTaskBom: null,
        workTaskBomVersion: null
      }
      this.resetForm('form')
    },
    peoReset() {
      this.peoForm = {
        wgPeoId: null,
        wgPeoName: null
      }
      this.resetForm('peoForm')
    },
    orderReset() {
      this.orderForm = {
        prOrderCode: null,
        prOrderName: null,
        prProductCode: null,
        prProductName: null,
        prProductSpecType: null,
        prGoodType: null,
        prProductUnitName: null,
        orderVo: null,
        productVo: null
      }
      this.resetForm('orderForm')
    },
    workTaskReset() {
      this.workTaskForm = {
        workTaskCode: null,
        workTaskName: null,
        workOrderCode: null,
        workOrderName: null,
        workTaskCell: null,
        workCellName: null,
        workTaskRouteCode: null,
        workTaskRouteName: null,
        workTaskProcedureCode: null,
        procedureName: null,
        workTaskManager: null,
        workTaskBom: null,
        workTaskBomVersion: null
      }
      this.resetForm('workTaskForm')
    },
    materialListReset() {
      this.materialListForm = {
        pdCode: null,
        pdName: null,
        pdSpecType: null,
        guName: null,
        prdBatch: null,
        requestCode: null
      }
      this.resetForm('materialListForm')
    },
    warehouseReset() {
      this.warehouseForm = {
        wCode: null,
        wName: null,
        saCode: null,
        saName: null,
        slCode: null,
        slName: null
      }
      this.resetForm('warehouseForm')
    },
    // 查询参数重置
    workOrderQueryReset() {
      this.workOrderQuery = {
        pageNum: 1,
        pageSize: 10,
        prOrderCode: null,
        prOrderName: null,
        prProductCode: null,
        prProductName: null,
        prProductSpecType: null,
        prGoodType: null,
        prProductUnitName: null,
        orderVo: null,
        productVo: null
      }
      this.resetForm('workOrderQueryForm')
    },
    workTaskQueryReset() {
      this.workTaskQuery = {
        pageNum: 1,
        pageSize: 10,
        workOrderCode: null,
        workTaskVo: null,
        workTaskProcedureCode: null,
        workTaskManager: null
      }
      this.resetForm('workTaskQueryForm')

      const workOrderCode = this.form.pmrWorkOrder
      if (workOrderCode !== undefined && workOrderCode !== null && workOrderCode !== '') {
        this.workTaskQuery.workOrderCode = workOrderCode
      }
    },
    materialQueryReset() {
      this.materialQuery = {
        pageNum: 1,
        pageSize: 10,
        materialVo: null,
        prouteCode: this.form.prouteCode,
        procedureCode: this.form.pmrWorkProcedure,
        unitType: null,
        pdGoodType: null,
        bomCode: this.form.workTaskBom,
        bomVersion: this.form.workTaskBomVersion
      }
      this.resetForm('materialQueryForm')
    },
    // 查询退料人开启事件
    handlePeoSearch() {
      this.peoReset()
      this.peoSearchOpen = true
      this.workGroupList = []
      this.activeGroup = ''
      this.title = '领料人'
      listWorkGroup().then(response => {
        this.workGroupList = response.data
        if (this.workGroupList.length > 0) {
          this.activeGroup = this.workGroupList[0].wgCode
        }
      }).catch(() => {
      })
    },
    // 班组选择事件
    handleSelect(wgCode) {
      this.activeGroup = wgCode
    },
    // 班组成员选择事件
    handlePeoChange(currentRow) {
      if (currentRow) {
        this.peoForm = currentRow
      } else {
        this.form.pmrReturnPeo = null
        this.form.pmrReturnPeoName = null
      }
    },
    // 查询退料人提交事件
    handlePeoSearchSubmit() {
      this.form.pmrReturnPeo = this.peoForm.wgPeoId
      this.form.pmrReturnPeoName = this.peoForm.wgPeoName
      this.peoSearchOpen = false
    },
    // 查询退料人关闭事件
    handlePeoSearchClose() {
      this.title = ''
      this.workGroupList = []
      this.activeGroup = ''
      this.peoSearchOpen = false
    },
    // 查询生产工单开启事件
    handleOrderSearch() {
      this.orderReset()
      this.workOrderQueryReset()
      this.title = '选择生产工单'
      this.orderSearchOpen = true
      this.getWorkOrderList()
    },
    // 查询生产工单
    getWorkOrderList() {
      this.workOrderList = []
      this.orderLoading = true
      listWorkOrder(this.workOrderQuery).then(response => {
        this.workOrderList = response.rows
        this.workOrderTotal = response.total
        this.isOrderSelected = false
        this.orderLoading = false
      }).catch(() => {
      })
    },
    // 工单搜索按钮
    handleWorkOrderQuery() {
      this.workOrderQuery.pageNum = 1
      this.getWorkOrderList()
    },
    // 重置工单查询
    resetWorkOrderQuery() {
      this.workOrderQueryReset()
      this.getWorkOrderList()
    },
    // 工单表格选择
    handleOrderTableChange(currentRow) {
      this.orderForm = currentRow
      this.isOrderSelected = true
    },
    // 工单弹出层关闭事件
    handleOrderClose() {
      this.workOrderQueryReset()
      this.orderReset()
      this.title = ''
      this.workOrderList = []
      this.workOrderTotal = 0
      this.isOrderSelected = false
      this.orderSearchOpen = false
    },
    // 工单弹出层提交事件
    handleOrderSubmit() {
      this.form.pmrWorkOrder = this.orderForm.prOrderCode
      this.form.pmrWorkOrderName = this.orderForm.prOrderName

      // 重置任务、工艺路线和工序
      this.form.pmrWorkTask = null
      this.form.pmrWorkTaskName = null
      this.form.pmrWorkProcedure = null
      this.form.procedureName = null
      this.form.prouteCode = null
      this.form.prouteName = null

      // 重置物料清单
      this.returnMaterialList = []

      this.handleOrderClose()
    },
    // 查询工单任务开启事件
    handleTaskSearch() {
      this.workTaskReset()
      this.workTaskQueryReset()
      const workOrderCode = this.form.pmrWorkOrder
      if (workOrderCode !== undefined && workOrderCode !== null && workOrderCode !== '') {
        this.workTaskQuery.workOrderCode = workOrderCode
        this.workOrderCodeDisplay = workOrderCode
        this.workOrderNameDisplay = this.form.pmrWorkOrderName
      } else {
        this.workOrderCodeDisplay = '未选择'
        this.workOrderNameDisplay = '未选择'
      }
      this.title = '选择工单任务'
      this.taskSearchOpen = true
      this.getWorkTaskList()
    },
    // 查询工单任务
    getWorkTaskList() {
      this.workTaskList = []
      this.workTaskLoading = true
      listWorkTask(this.workTaskQuery).then(response => {
        this.workTaskList = response.rows
        this.workTaskTotal = response.total
        this.isWorkTaskSelected = false
        this.workTaskLoading = false
      }).catch(() => {
      })
    },
    // 工单任务搜索按钮
    handleWorkTaskQuery() {
      this.workTaskQuery.pageNum = 1
      this.getWorkTaskList()
    },
    // 重置工单任务查询
    resetWorkTaskQuery() {
      this.workTaskQueryReset()
      this.getWorkTaskList()
    },
    // 工序下拉框点击事件
    handleProcedureVisibleChange(isVisible) {
      if (isVisible) {
        this.procedureList = []
        getProcedureCode().then(response => {
          this.procedureList = response.data
        })
      }
    },
    // 任务负责人下拉框点击事件
    handleManagerVisibleChange(isVisible) {
      if (isVisible) {
        this.taskManagerList = []
        listTaskManager().then(response => {
          this.taskManagerList = response.data
        })
      }
    },
    // 工单任务表格选择
    handleWorkTaskChange(currentRow) {
      this.workTaskForm = currentRow
      this.isWorkTaskSelected = true
    },
    // 工单任务提交事件
    handleWorkTaskSubmit() {
      this.form.pmrWorkTask = this.workTaskForm.workTaskCode
      this.form.pmrWorkTaskName = this.workTaskForm.workTaskName
      this.form.prouteCode = this.workTaskForm.workTaskRouteCode
      this.form.prouteName = this.workTaskForm.workTaskRouteName
      this.form.pmrWorkProcedure = this.workTaskForm.workTaskProcedureCode
      this.form.procedureName = this.workTaskForm.procedureName
      this.form.pmrWorkOrder = this.workTaskForm.workOrderCode
      this.form.pmrWorkOrderName = this.workTaskForm.workOrderName
      this.form.workTaskBom = this.workTaskForm.workTaskBom
      this.form.workTaskBomVersion = this.workTaskForm.workTaskBomVersion

      // 重置物料清单
      this.returnMaterialList = []

      this.handleWorkTaskClose()
    },
    // 工单任务关闭事件
    handleWorkTaskClose() {
      this.workTaskReset()
      this.workTaskQueryReset()
      this.title = ''
      this.workTaskList = []
      this.isWorkTaskSelected = false
      this.taskSearchOpen = false
    },
    // 添加物料清单开启事件
    handleMaterialListSearch() {
      this.materialQueryReset()
      this.materialListReset()
      this.title = '添加物料'
      this.materialListSearchOpen = true
      this.getMaterialList()
    },
    // 查询物料
    getMaterialList() {
      this.materialList = []
      this.materialLoading = true
      listMaterial(this.materialQuery).then(response => {
        this.materialList = response.rows
        this.materialTotal = response.total
        this.isMaterialSelected = false
        this.materialLoading = false
      })
    },
    // 条件查询物料
    handleMaterialListQuery() {
      this.materialQuery.pageNum = 1
      this.getMaterialList()
    },
    // 重置物料查询
    resetMaterialList() {
      this.materialQueryReset()
      this.getMaterialList()
    },
    // 物料选择时间
    handleMaterialListChange(currentRow) {
      this.materialListForm = currentRow
      this.isMaterialSelected = true
    },
    // 添加物料提交事件
    handleMaterialListSubmit() {
      this.returnMaterialList.push({
        prdBatch: this.materialListForm.prdBatch,
        gbsGood: {
          pdCode: this.materialListForm.pdCode,
          pdName: this.materialListForm.pdName,
          pdSpecType: this.materialListForm.pdSpecType,
          pdGuName: this.materialListForm.guName
        }
      })
      this.handleMaterialListSearchClose()
    },
    // 添加物料关闭事件
    handleMaterialListSearchClose() {
      this.materialQueryReset()
      this.materialListReset()
      this.title = ''
      this.materialList = []
      this.materialTotal = 0
      this.isMaterialSelected = false
      this.materialListSearchOpen = false
    },
    // 单位下拉框开启事件
    handleUnitVisibleChange(isVisible) {
      if (isVisible) {
        this.unitList = []
        listUnit().then(response => {
          this.unitList = response.data
        })
      }
    },
    // 仓库弹出层开启事件
    handleWarehouseSearch(index) {
      this.warehouseIndex = index
      this.title = '选择仓库'
      this.warehouseSearchOpen = true
      this.isWarehouseSelected = false
    },
    // 仓库弹出层关闭事件
    handleWarehouseClose() {
      this.warehouseSearchOpen = false
      this.warehouseReset()
      this.warehouseList = []
      this.areaList = []
      this.locationList = []
      this.warehouseIndex = 0
      this.title = ''
    },
    // 仓库弹出层确定事件
    handleWarehouseConfirm() {
      this.$set(
        this.returnMaterialList[this.warehouseIndex].gbsGood,
        'storageSlCode',
        this.warehouseForm.slCode
      )
      this.$set(
        this.returnMaterialList[this.warehouseIndex].gbsGood,
        'storageWName',
        this.warehouseForm.wName + ' / ' + this.warehouseForm.saName + ' / ' + this.warehouseForm.slName
      )
      this.handleWarehouseClose()
    },
    // 仓库下拉框焦点事件
    handleWarehouseVisibleChange(visible) {
      if (visible) {
        const query = {
          saCode: this.warehouseForm.saCode,
          slCode: this.warehouseForm.slCode
        }
        this.getWarehouseList(query)
      }
    },
    // 查询仓库列表
    getWarehouseList(query) {
      this.warehouseList = []
      getWCode(query).then(response => {
        this.warehouseList = response.data
      })
    },
    // 库区下拉框焦点事件
    handleAreaVisibleChange(visible) {
      if (visible) {
        const query = {
          wCode: this.warehouseForm.wCode,
          slCode: this.warehouseForm.slCode
        }
        this.getAreaList(query)
      }
    },
    // 查询库区列表
    getAreaList(query) {
      this.areaList = []
      getSaCode(query).then(response => {
        this.areaList = response.data
      })
    },
    // 库区下拉框选择事件
    handleAreaChange(val) {
      if (val === '' || val === undefined) {
        return
      }
      this.warehouseForm.saCode = val
      const wCode = this.areaList.find(item => item.saCode === val).wCode
      const wName = this.areaList.find(item => item.saCode === val).wName

      this.warehouseList = [{
        wCode: wCode,
        wName: wName
      }]

      this.warehouseForm.wCode = wCode
      this.warehouseForm.wName = wName
    },
    // 库区清除事件
    handleAreaClear() {
      this.warehouseForm.saCode = null
      this.warehouseForm.saName = null
      this.warehouseForm.wCode = null
      this.warehouseForm.wName = null
      this.areaList = []
      this.warehouseList = []
    },
    // 库位下拉框焦点事件
    handleLocationVisibleChange(visible) {
      if (visible) {
        const query = {
          wCode: this.warehouseForm.wCode,
          saCode: this.warehouseForm.saCode
        }
        this.getLocationList(query)
      }
    },
    // 查询库位列表
    getLocationList(query) {
      this.locationList = []
      getSlCode(query).then(response => {
        this.locationList = response.data
      })
    },
    // 库位选择事件
    handleLocationChange(val) {
      if (val === '' || val === undefined) {
        this.isWarehouseSelected = false
        return
      }
      this.warehouseForm.slCode = val

      const wCode = this.locationList.find(item => item.slCode === val).wCode
      const wName = this.locationList.find(item => item.slCode === val).wName
      const saCode = this.locationList.find(item => item.slCode === val).saCode
      const saName = this.locationList.find(item => item.slCode === val).saName
      const slName = this.locationList.find(item => item.slCode === val).slName

      this.warehouseList = [{
        wCode: wCode,
        wName: wName
      }]
      this.areaList = [{
        saCode: saCode,
        saName: saName
      }]

      this.warehouseForm.wCode = wCode
      this.warehouseForm.wName = wName
      this.warehouseForm.saCode = saCode
      this.warehouseForm.saName = saName
      this.warehouseForm.slName = slName

      this.isWarehouseSelected = true
    },
    // 库位清除事件
    handleLocationClear() {
      this.warehouseReset()
      this.locationList = []
      this.warehouseList = []
      this.areaList = []
      this.isWarehouseSelected = false
    },
    // 限制输入框写入数字
    blurText(e) {
      let boolean = new RegExp('^[1-9][0-9]*$').test(e.target.value)
      if (!boolean) {
        this.$message.warn('请输入正整数')
        e.target.value = ' '
      }
    },
    // 物料删除事件
    handleMaterialListDelete(index) {
      this.$set(this.returnMaterialList, index, null)
      this.returnMaterialList = this.returnMaterialList.filter(item => item !== null)
    },
    // 多个物料删除事件
    handleMultiMaterialListDelete() {
      const indicesToDelete = this.getSelectedIndices().sort((a, b) => b - a)
      indicesToDelete.forEach(index => {
        this.$set(this.returnMaterialList, index, null)
        this.returnMaterialList = this.returnMaterialList.filter(item => item !== null)
      })

      this.selectedRows = []
    },
    // 获取选中的索引
    getSelectedIndices() {
      return this.selectedRows.map(item => item.index)
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multiple = !selection.length
      this.selectedRows = selection.map(row => {
        return {
          row: row,
          index: this.returnMaterialList.indexOf(row)
        }
      })
    },
    // 页面提交事件
    handlePageSubmit() {
      this.$modal.confirm('确认提交?').then(() => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.returnMaterialList.length > 0) {
              const invalidReturnNums = this.returnMaterialList.filter(item => !item.rmlReturnNum)
              if (invalidReturnNums.length > 0) {
                this.$modal.alert('领料数量不能为空')
                return
              }

              const invalidWarehouses = this.returnMaterialList.filter(item => !item.gbsGood.storageSlCode)
              if (invalidWarehouses.length > 0) {
                this.$modal.alert('请选择仓库')
                return
              }

              this.form.returnMaterialList = this.returnMaterialList.map(item => ({
                ...item,
                rmlReason: item.rmlReason || '',
                rmlDesc: item.rmlDesc || ''
              }))
            } else {
              this.form.returnMaterialList = []
            }

            addMaterial_return(this.form).then(() => {
              this.$modal.msgSuccess('添加成功')
              this.handlePageClose()
            }).catch(() => {
              this.$modal.msgError('添加失败')
            })
          }
        })
      })
    },
    // 页面关闭事件
    handlePageClose() {
      this.reset()
      this.$tab.closeOpenPage()
      this.$tab.refreshPage({
        path: '/wm/inbound/material_return'
      })
    }
  }
}
</script>

<template>
  <div class="app-container">
    <div class="page-body">
      <el-divider>
        <div class="my-divider">基础信息</div>
      </el-divider>

      <el-form ref="form" :model="form" size="small" :inline="true" :rules="rules">
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="退料单名称" prop="pmrName" label-width="92px">
              <el-input v-model="form.pmrName" placeholder="请输入" class="formInput" />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="退料日期" prop="pmrReturnDate" label-width="92px">
              <el-date-picker
                v-model="form.pmrReturnDate"
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
                class="formSelect"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="退料人" prop="pmrReturnPeoName" label-width="92px">
              <el-input v-model="form.pmrReturnPeoName" placeholder="请选择退料人" class="formInput" readonly>
                <i slot="suffix" class="el-icon-search" @click="handlePeoSearch" />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="工单名称" prop="pmrWorkOrderName" label-width="92px">
              <el-input v-model="form.pmrWorkOrderName" placeholder="请选择生产工单" class="formInput" readonly>
                <i slot="suffix" class="el-icon-search" @click="handleOrderSearch" />
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="工单编号" prop="pmrWorkOrder" label-width="92px">
              <el-input v-model="form.pmrWorkOrder" placeholder="请输入" class="formInput" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="任务名称" prop="pmrWorkTaskName" label-width="92px">
              <el-input v-model="form.pmrWorkTaskName" placeholder="请选择任务" class="formInput" readonly>
                <i slot="suffix" class="el-icon-search" @click="handleTaskSearch" />
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="任务编号" prop="pmrWorkTask" label-width="92px">
              <el-input v-model="form.pmrWorkTask" placeholder="请输入" class="formInput" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="工艺路线" prop="prouteName" label-width="92px">
              <el-input v-model="form.prouteName" placeholder="请输入" class="formInput" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="10" :offset="2">
            <el-form-item label="工序名称" prop="procedureName" label-width="92px">
              <el-input v-model="form.procedureName" placeholder="请输入" class="formInput" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb8">
          <el-col :span="24" :offset="2">
            <el-form-item label="备注" prop="pmrDesc" label-width="92px">
              <el-input v-model="form.pmrDesc" placeholder="请输入" type="textarea" class="formTextarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-divider>
        <div>物料清单</div>
      </el-divider>

      <el-row class="mb8">
        <el-col :span="24">
          <el-button type="primary" size="mini" class="el-icon-document-add" @click="handleMaterialListSearch">添加
          </el-button>
          <el-button size="mini" class="el-icon-delete" @click="handleMultiMaterialListDelete" :disabled="multiple">
            移除
          </el-button>
        </el-col>
      </el-row>

      <el-table :data="returnMaterialList" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="物料编码" prop="gbsGood.pdCode" align="center" width="150" fixed />
        <el-table-column label="物料名称" prop="gbsGood.pdName" align="center" width="120" fixed />
        <el-table-column label="规格型号" prop="gbsGood.pdSpecType" align="center" width="120" />
        <el-table-column label="单位" prop="gbsGood.pdGuName" align="center" width="120" />
        <el-table-column label="本次退料数量" prop="rmlReturnNum" align="center" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rmlReturnNum" @blur="blurText($event)" />
          </template>
        </el-table-column>
        <el-table-column label="退料原因" prop="rmlReason" align="center" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rmlReason" style="width: 100%" />
          </template>
        </el-table-column>
        <el-table-column label="生产日期" prop="rmlProductionDate" align="center" width="180">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.rmlProductionDate"
              type="date"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </template>
        </el-table-column>
        <el-table-column label="到期日期" prop="rmlExpirationDate" align="center" width="180">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.rmlExpirationDate"
              type="date"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </template>
        </el-table-column>
        <el-table-column label="仓库名称" prop="gbsGood.storageWName" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.gbsGood.storageWName" placeholder="请选择" class="formInput"
                      style="width: 100%" readonly
            >
              <i slot="suffix" class="el-icon-search" @click="handleWarehouseSearch(scope.$index)"></i>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="rmlDesc" align="center" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rmlDesc" style="width: 100%" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-remove"
                @click="handleMaterialListDelete(scope.$index)"
              >移除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-row class="mb8">
        <el-col :span="4" :offset="21">
          <span style="font-size: 12px">退料总数: {{ this.returnMaterialList.length }}</span>
        </el-col>
      </el-row>

      <el-divider />

      <el-row class="mb8">
        <el-col :span="24" style="text-align: center">
          <el-button type="primary" @click="handlePageSubmit">确定</el-button>
          <el-button @click="handlePageClose">取消</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 退料人搜索弹出层 -->
    <el-dialog :title="title" :visible.sync="peoSearchOpen" width="600px" style="height: 600px" append-to-body>
      <el-row :gutter="0">
        <el-col :span="6" :offset="5">
          <el-menu
            :default-active="activeGroup"
            @select="handleSelect"
            class="team-menu"
            background-color="#f5f8fe"
          >
            <el-menu-item
              v-for="group in workGroupList"
              :key="group.wgCode"
              :index="group.wgCode"
            >
              {{ group.wgName }}
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="6">
          <el-table
            :data="selectedGroupMembers"
            :show-header="false"
            border
            :row-style="{height:'56px'}"
            @current-change="handlePeoChange"
            highlight-current-row
            max-height="400px"
          >
            <el-table-column prop="wgPeoId" v-if="false" />
            <el-table-column prop="wgPeoName" label="姓名" />
          </el-table>
        </el-col>
      </el-row>

      <el-divider />

      <el-row>
        <el-col :span="24" style="text-align: center" :offset="9">
          <el-button type="primary" @click="handlePeoSearchSubmit">确定</el-button>
          <el-button @click="handlePeoSearchClose">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 工单搜索弹出层 -->
    <el-dialog :title="title" :visible.sync="orderSearchOpen" width="1100px" append-to-body @close="handleOrderClose">
      <el-form ref="workOrderQueryForm" :model="workOrderQuery" size="small" :inline="true">
        <div style="margin-left: 50px">
          <el-row :gutter="20" class="mb8">
            <el-col :span="5" :offset="0">
              <el-form-item prop="orderVo">
                <el-input v-model="workOrderQuery.orderVo" placeholder="工单名称/编号" class="formInput"
                          @keyup.enter.native="handleWorkOrderQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item prop="productVo">
                <el-input v-model="workOrderQuery.productVo" placeholder="产品名称/编号" class="formInput"
                          @keyup.enter.native="handleWorkOrderQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item prop="productVo">
                <el-select
                  v-model="workOrderQuery.prGoodType"
                  placeholder="产品类型"
                  class="formSelect"
                  clearable
                >
                  <el-option
                    v-for="dict in getGbsGoodType"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleWorkOrderQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetWorkOrderQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <el-table v-loading="orderLoading" :data="workOrderList" border highlight-current-row
                @current-change="handleOrderTableChange"
      >
        <el-table-column label="工单编号" align="center" prop="prOrderCode" />
        <el-table-column label="工单名称" align="center" prop="prOrderName" />
        <el-table-column label="产品编号" align="center" prop="prProductCode" />
        <el-table-column label="产品名称" align="center" prop="prProductName" />
        <el-table-column label="规格型号" align="center" prop="prProductSpecType" />
        <el-table-column label="产品类型" align="center" prop="prGoodType">
          <template slot-scope="scope">
            <dict-tag :options="getGbsGoodType" :value="scope.row.prGoodType" />
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="prProductUnitName" />
      </el-table>

      <pagination
        v-show="workOrderTotal>0"
        :total="workOrderTotal"
        :page.sync="workOrderQuery.pageNum"
        :limit.sync="workOrderQuery.pageSize"
        @pagination="getWorkOrderList"
      />

      <el-divider />

      <el-row>
        <el-col :span="24" style="text-align: center" :offset="9">
          <el-button type="primary" @click="handleOrderSubmit" :disabled="!isOrderSelected">确定</el-button>
          <el-button @click="handleOrderClose">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!--工单任务弹出层 -->
    <el-dialog :title="title" :visible.sync="taskSearchOpen" width="1100px" append-to-body @close="handleWorkTaskClose">
      <el-row class="mb8">
        <el-col :span="6">
          <span>工单编号: {{ this.workOrderCodeDisplay }}</span>
        </el-col>
        <el-col :span="6">
          <span>工单名称: {{ this.workOrderNameDisplay }}</span>
        </el-col>
      </el-row>

      <el-divider />

      <el-form ref="workTaskQueryForm" :model="workTaskQuery" size="small" :inline="true">
        <div style="margin-left: 50px">
          <el-row :gutter="20" class="mb8">
            <el-col :span="5" :offset="0">
              <el-form-item prop="orderVo">
                <el-input v-model="workTaskQuery.workTaskVo" placeholder="任务名称/编号" class="formInput"
                          @keyup.enter.native="handleWorkTaskQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item prop="productVo">
                <el-select v-model="workTaskQuery.workTaskProcedureCode"
                           placeholder="工序名称"
                           clearable
                           class="formSelect"
                           @visible-change="handleProcedureVisibleChange"
                >
                  <el-option v-for="item in procedureList" :key="item.procedureCode" :label="item.procedureName"
                             :value="item.procedureCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item prop="productVo">
                <el-select
                  v-model="workTaskQuery.workTaskManager"
                  placeholder="任务负责人"
                  class="formSelect"
                  clearable
                  @visible-change="handleManagerVisibleChange"
                >
                  <el-option
                    v-for="item in taskManagerList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleWorkTaskQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetWorkTaskQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <el-divider />

      <el-table v-loading="workTaskLoading" :data="workTaskList" border highlight-current-row
                @current-change="handleWorkTaskChange"
      >
        <el-table-column label="任务编号" align="center" prop="workTaskCode" />
        <el-table-column label="任务名称" align="center" prop="workTaskName" />
        <el-table-column label="生产单元" align="center" prop="workCellName" />
        <el-table-column label="工艺路线" align="center" prop="workTaskRouteName" />
        <el-table-column label="工序名称" align="center" prop="procedureName" />
        <el-table-column label="工序编号" align="center" prop="workTaskProcedureCode" />
        <el-table-column label="任务负责人" align="center" prop="workTaskManager" />
      </el-table>

      <pagination
        v-show="workTaskTotal>0"
        :total="workTaskTotal"
        :page.sync="workTaskQuery.pageNum"
        :limit.sync="workTaskQuery.pageSize"
        @pagination="getWorkTaskList"
      />

      <el-divider />

      <el-row>
        <el-col :span="24" style="text-align: center" :offset="9">
          <el-button type="primary" @click="handleWorkTaskSubmit" :disabled="!isWorkTaskSelected">确定</el-button>
          <el-button @click="handleWorkTaskClose">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 添加物料弹出层 -->
    <el-dialog :title="title" :visible.sync="materialListSearchOpen" width="1100px" append-to-body
               @close="handleMaterialListSearchClose"
    >
      <el-form ref="materialQueryForm" :model="materialQuery" size="small" :inline="true">
        <div style="margin-left: 50px">
          <el-row :gutter="20" class="mb8">
            <el-col :span="5" :offset="0">
              <el-form-item prop="materialVo">
                <el-input v-model="materialQuery.materialVo" placeholder="物料名称/编号" class="formInput"
                          @keyup.enter.native="handleMaterialListQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item prop="unitType">
                <el-select v-model="materialQuery.unitType"
                           placeholder="请选择单位"
                           clearable
                           class="formSelect"
                           @visible-change="handleUnitVisibleChange"
                >
                  <el-option v-for="item in unitList" :key="item.unitCode" :label="item.unitName"
                             :value="item.unitCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item prop="productVo">
                <el-select
                  v-model="materialQuery.pdGoodType"
                  placeholder="请选择类型"
                  class="formSelect"
                  clearable
                >
                  <el-option
                    v-for="dict in getGbsGoodType"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleMaterialListQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetMaterialList">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <el-divider />

      <el-table v-loading="materialLoading" :data="materialList" border highlight-current-row
                @current-change="handleMaterialListChange"
      >
        <el-table-column label="物料编号" align="center" prop="pdCode" />
        <el-table-column label="物料名称" align="center" prop="pdName" />
        <el-table-column label="规格型号" align="center" prop="pdSpecType" />
        <el-table-column label="单位" align="center" prop="guName" />
        <el-table-column label="类型" align="center" prop="pdGoodType">
          <template slot-scope="scope">
            <dict-tag :options="getGbsGoodType" :value="scope.row.pdGoodType" />
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="materialTotal>0"
        :total="materialTotal"
        :page.sync="materialQuery.pageNum"
        :limit.sync="materialQuery.pageSize"
        @pagination="getMaterialList"
      />

      <el-divider />

      <el-row>
        <el-col :span="24" style="text-align: center" :offset="9">
          <el-button type="primary" @click="handleMaterialListSubmit" :disabled="!isMaterialSelected">确定</el-button>
          <el-button @click="handleMaterialListSearchClose">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 仓库搜索弹出层 -->
    <el-dialog :title="title" :visible.sync="warehouseSearchOpen" width="800px" append-to-body
               @close="handleWarehouseClose"
    >
      <el-form ref="warehouseForm" :model="warehouseForm" size="small" :inline="true">
        <div style="margin-left: 40px">
          <el-row :gutter="20" class="mb8">
            <el-col :span="24" :offset="0">
              <el-select
                v-model="warehouseForm.wCode"
                placeholder="选择仓库"
                class="formSelect"
                clearable
                style="margin-right: 10px"
                @visible-change="handleWarehouseVisibleChange"
              >
                <el-option v-for="item in warehouseList" :key="item.wCode" :label="item.wName" :value="item.wCode" />
              </el-select>
              <el-select
                v-model="warehouseForm.saCode"
                placeholder="选择库区"
                class="formSelect"
                clearable
                style="margin-right: 10px"
                @visible-change="handleAreaVisibleChange"
                @change="handleAreaChange"
                @clear="handleAreaClear"
              >
                <el-option v-for="item in areaList" :key="item.saCode" :label="item.saName" :value="item.saCode" />
              </el-select>
              <el-select
                v-model="warehouseForm.slCode"
                placeholder="选择库位"
                class="formSelect"
                clearable
                @visible-change="handleLocationVisibleChange"
                @change="handleLocationChange"
                @clear="handleLocationClear"
              >
                <el-option v-for="item in locationList" :key="item.slCode" :label="item.slName" :value="item.slCode" />
              </el-select>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <el-divider />

      <el-row>
        <el-col :span="24" style="text-align: center" :offset="9">
          <el-button type="primary" @click="handleWarehouseConfirm" :disabled="!isWarehouseSelected">确定</el-button>
          <el-button @click="handleWarehouseClose">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.page-body {
  width: 1000px;
  margin: 0 auto;
}

.formInput, .formSelect {
  width: 220px;
}

.formTextarea {
  width: 721px;
}

.team-menu {
  height: 100%;
}
</style>
